<template>
  <el-dialog title="蛋糕详情" :visible.sync="visible" width="600px">
    <div class="add-form">
      <el-form ref="form" label-width="120px">
        <el-form-item label="条形码/二维码">
          <div>
            <barcode
              tag="img"
              :value="detail.id"
              :options="{
                    height: 30,
                    width: 2,
                    displayValue: false,
                    margin: 1,
                  }"
              style="margin-top: 2px"
            ></barcode>
            <qrCode :options="{
              text: getText(),
              width: 200,
              height: 200,
            }"></qrCode>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import VueBarcode from "@xkeshi/vue-barcode";
import qrCode from './qrCode'
export default {
  components: {
    barcode: VueBarcode,
    qrCode,
  },
  data() {
    return {
      visible: false,
      detail: {}
    }
  },
  methods: {
    show({ data }) {
      this.visible = true
      this.detail = data || {}
    },
    getText() {
      return `${this.detail.id}`
    }
  },
}
</script>

<style lang="scss" scoped>
.cake-item {
  border: 1px solid #ddd;
}
</style>
